<template>
	<div>
		{{ loading }}
		<SelectAuth v-model="selectData" v-if="comShow.show1" :limit="10"></SelectAuth>
		<button @click="comShow.show1 = !comShow.show1">显示{{ comShow.show1 }}</button>
		<SelectAuth v-model="selectData2" v-if="comShow.show2" :limit="10"></SelectAuth>
		<button @click="comShow.show2 = !comShow.show2">显示{{ comShow.show2 }}</button>
		<SelectAuth v-model="selectAllData" v-if="comShow.show3" :limit="10"></SelectAuth>
		<button @click="comShow.show3 = !comShow.show3">显示{{ comShow.show3 }}</button>
		<div class="fan-select-input">
			<div class="tag-list">
				<div class="tag-item" v-for="index in 10" :key="index">测试{{index}}名和曾</div>
			</div>
			<div class="more-count">+10</div>
			<div class="input__suffix">
				<i class="el-icon-arrow-down"></i>
			</div>
		</div>
	</div>
</template>
<script>
import SelectAuth from "./components/selectAuth/index"
import { store,loadIns,getData } from "./components/selectAuth/storeData";
import selectAllData from "./data.js"

const select = {
    "userId": "0026be711f5a281b6b559755cb2378d5",
    "mobile": {
        "switchButton": true,
        "visualRangeType": "40",
        "customList": [
            {
                "customType": "30",
                "customId": "22a57c67eaa475f88523bbd1d38dea05"
            },
            {
                "customType": "30",
                "customId": "b062923181859d3dff7df97ef973de36"
            },
            {
                "customType": "30",
                "customId": "37c040080c838daadc6f6f0d18e61a9c"
            },
            {
                "customType": "30",
                "customId": "c74685a240dfb303e2eb48a5cdcee468"
            },
            {
                "customType": "20",
                "customId": "0343d77410c905adf2bbcdcba651fcbb"
            },
            {
                "customType": "20",
                "customId": "04129ea98b36f2d97bf4f70e0efd0d6a"
            }
        ]
    },
    "buddy": {
        "switchButton": true,
        "visualRangeType": "20",
        "customList": []
    },
    "virtual": {
        "switchButton": true,
        "visualRangeType": "20",
        "customList": []
    },
    "disturb": {
        "whetherNotDisturb": true,
        "whetherNotDisturbApprove": false,
        "whetherNotDisturbTask": true,
        "whetherNotDisturbNotice": false,
        "whetherNotDisturbStudy": false
    }
}

// console.log(select);


function createDataSlect(customList) {
	console.log(customList)
	const dictType = {
							10:"Deps",
							20:"Roles",
							30:"Users",
	}
	const selectData = [];

	customList.forEach((item) => {
		const index = selectData.findIndex((item1) => {
			return item1.type == dictType[item.customType];
		})
		if (index == -1) {
			selectData.push({
				type: dictType[item.customType],
				data: [item.customId],
				sort: selectData.length
			})
		} else {
			selectData[index].data.push(item.customId);
		}
	});

	return selectData;
}

const formData = {};

Object.keys(select).forEach(key => {
	const item = select[key];
	if (item.customList && item.customList.length) {
		formData[key] = createDataSlect(item.customList);
	}
})

console.log(formData);

const selectData = [
    {
        "type": "Roles",
        "data": [
            "0343d77410c905adf2bbcdcba651fcbb",
            "04129ea98b36f2d97bf4f70e0efd0d6a"
        ],
        "sort": 0
    },
    {
        "type": "Users",
        "data": [
            "22a57c67eaa475f88523bbd1d38dea05",
            "b062923181859d3dff7df97ef973de36"
        ],
        "sort": 1
    },
    {
        "type": "Deps",
        "data": [
            "e919c6be1096e6906786e340ab1bee09",
            "3b2eeec14572012ddf1901702d7a9b24"
        ],
        "sort": 2
    }
]

const selectData2 = [
    {
        "type": "Roles",
        "data": [
            "0343d77410c905adf2bbcdcba651fcbb",
            "04129ea98b36f2d97bf4f70e0efd0d6a"
        ],
        "sort": 0
    },
    {
        "type": "Users",
        "data": [
            "22a57c67eaa475f88523bbd1d38dea05",
            "b062923181859d3dff7df97ef973de36"
        ],
        "sort": 1
    }
]
export default {
    components: {
        SelectAuth
	},
	data() {
		return {
			comShow: {
				show1: true,
				show2: true,
				show3:true,
			},
            loading:false,
			store,
			selectData: selectData,
            selectData2,
            selectAllData
		}
	},

    methods: {
        select(v) {
            console.log(v);
        }
    },
	mounted() {
        this.loading =true
        loadIns.on("loaded", () => {
            this.loading = false;
        })
        getData();

	}
}
</script>
<style lang="scss" scoped>
.fan-select-input{
    width: 100%;
    min-height: 32px;
    border:solid 1px #eee;
    border-radius: 4px;
    display: flex;
    margin-top: 20px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    .tag-list{
        flex: 1;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        height: 100%;
        padding:0px 4px;
        overflow: hidden;
        overflow-x: hidden;
        box-sizing: border-box;
        top:0px;
        flex-wrap: wrap;
        font-size: 0px;
        margin-right: 10px;
        padding:4px 4px;
        padding-bottom:2px;
        .tag-item{
            font-size:12px;
            height: 24px;
            display:inline-block;
            background-color: #dae5ff;
            line-height: 24px;
            padding:0px 4px;
            margin-right: 4px;
            white-space: nowrap;
            position: relative;
            border-radius: 2px;
            margin-bottom: 2px;

        }
    }
    .more-count{
        flex-shrink: 0;
        padding: 0px 4px;
        height: 24px;
        line-height: 24px;
        justify-content: center;
        align-items: center;
        font-size:12px;
        background-color: #dae5ff;
        text-align: center;
        border-radius:2px;
    }
    .input__suffix{
        width:30px;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
